<template>
  <!-- 退货原因设置 -->
  <div class='app-container'>
    <div class="listData">
      <div class="box">
        <el-icon>
          <Tickets />
        </el-icon>
        <div>数据列表</div>
      </div>
      <el-button size="small" @click="openReasonDlg(0)">添加</el-button>
    </div>
    <!-- form数据表单 -->
    <el-table ref="multipleTableRef" :data="tabList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />

      <el-table-column property="id" label="编号" />
      <el-table-column property="name" label="原因类型" />
      <el-table-column property="sort" label="排序" />
      <el-table-column label="是否可用">
        <template #default="{ row }">
          <el-switch @click="switchChange({ ids: row.id, status: row.status })" v-model="row.status" :active-value="1"
            :inactive-value="0" />
        </template>
      </el-table-column>
      <el-table-column property="name" label="添加时间">
        <template #default="{ row }">
          {{ row.createTime ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") : "" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="140">
        <template #default="{ row }">
          <el-button size="small" @click="openReasonDlg(row.id)">编辑</el-button>
          <el-button size="small" @click="delteReason(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pag">
      <!-- 左侧批量操作 -->
      <div class="left_more">
        <el-select v-model="selectValue" class="m-2" placeholder="批量操作" size="large">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" @click="selectChange">确定</el-button>
      </div>
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[5, 10, 15, 20]" background layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
  <ReasonDlg :orderVisiable="reasonDlgVis" :itemId="itemId" @changeItemId="changeItemId" @closeReasonDlg="closeReasonDlg"
    @getAdminList="getAdminList" />
</template>

<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import userTable from "@/hooks/umsTable"
import * as returnReason from "@/request/oms_returnReason"
import ReasonDlg from "./components/returnReasonDlg.vue"
import { ref } from 'vue';
import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
const nulls = ref()
const { tabList,
  paginationParams,
  handleSizeChange,
  handleCurrentChange,
  getAdminList } = userTable(returnReason.getRturnReasonData, nulls.value)
const selectValue = ref();
const options = ref([{
  value: 0, label: "删除"
}])
const selectionChangedata = ref()
const handleSelectionChange = (val: any) => {
  selectionChangedata.value = val.map((item: any) => {
    return item.id
  })
}
// 是否启用
const switchChange = (row: { ids: number, status: string }) => {
  returnReason.updateStatus(row).then(res => {
    if (res.code === 200) {
      ElMessage.success("修改状态成功")
      getAdminList()
    } else {
      row.status = row.status === "0" ? "1" : " 0"
      ElMessage.error(res.message)
    }
  }).catch(() => {
    row.status = row.status === "0" ? "1" : " 0"
    ElMessage.error("修改数据失败")
  })
}
// 删除
const delteReason = (id: number | number[]) => {
  let ids = 0 as number | number[] | string
  if (Array.isArray(id)) {
    ids = id.join(",")
  } else {
    ids = id
  }
  ElMessageBox.confirm("您确定要删除此数据吗？", "删除提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    returnReason.deleteReasonById({ ids }).then(res => {
      if (res.code === 200) {
        ElMessage.success("删除数据成功")
        getAdminList()
      } else {
        ElMessage.error(res.message)
      }
    })
  }).catch(() => {
    ElMessage.success("已取消操作")
  })

}
const selectChange = () => {
  if (selectValue.value === 0) {
    delteReason(selectionChangedata.value)
  }
}
// 打开编辑=添加
const reasonDlgVis = ref(false)
const itemId = ref(0)
const changeItemId = (id: number) => {
  itemId.value = id
}
const openReasonDlg = (id: number) => {
  reasonDlgVis.value = true
  changeItemId(id)
}
const closeReasonDlg = () => {
  reasonDlgVis.value = false
  changeItemId(0)
}
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0;
}

.listData {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 2px 3px 11px -5px;

  .box {
    display: flex;
    align-items: center;
  }
}

.pag {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left_more {
    display: flex;
    align-items: center;

    .el-select {
      margin-right: 8px;
    }
  }
}

:deep(.el-table .cell) {
  text-align: center;
}
</style>